<template>
    <div class="team flexv">
        <pub-head title="团队成员"></pub-head>
        
		<div v-if="list.length!=0">
			<div class="head ali-c" v-if="data">
			    <div class="flex head-items">
			        <div class="item direct flex1 tc bold click" :class="{'on':  myType== 1}" @click="type(1)">直邀({{pcount ? pcount : '0'}})</div>
			        <div class="item indirect flex1 tc bold click" :class="{'on': myType == 2}" @click="type(2)">间邀({{spcount ? spcount : '0'}})</div>
			    </div>
			</div>
			<div class="fix_space"></div>
			
			<!-- 列表 -->
			<div class="lists-head flex jus-b mt2" v-if="list.length > 0">
			    <span class="member tc bold">成员</span>
			    <span class="boss tc bold" v-if="thss == 2">上级</span>
			    <span class="time tc bold">手机号</span>
			</div>
			<list v-model="loading" :finished="finished" :immediate-check="true"
			finished-color="#999" finished-text='没有更多了咯~'  v-if="list.length>0" @load="get()" >
			    <ul class="lists flexv">
			        <li class="list flex jus-b" v-for="(item, index) in list" :key="index">
			            <div class="list-img-box flex">
			                <div class="list-img flex">
			                    <img v-lazy="item.avatar" alt="">
			                </div>
			                <span class="name">{{item.username}}</span>
			            </div>
			            <div class="boss flex"  v-if="thss == 2">
			                <span class="boss-name">{{item.sp_nickname}}</span>
			                <span class="boss-level levela tc" v-if="item.sp_level==40">合伙人</span>
			                <span class="boss-level levelb tc" v-if="item.sp_level==30">咨询顾问</span>
			                <span class="boss-level levelc tc" v-if="item.sp_level==20">VIP</span>
			            </div>
			            <span class="time">{{item.mobile}}</span>
			        </li>
			    </ul>
			</list>
		</div>
        
        <!--为空提示-->
        <div class="empty_box flexv flexc" v-else>
            <img src="@/assets/teammate_empty.png" alt="">
            <p class="tc">还未有团队成员~</p>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import pubHead from '@/components/head';
import { myTeam } from '@/request/api';
import list from '@/components/listLoad/listLoad';
import { Toast } from 'vant'; 
export default {
    data(){
        return{
            data: null, // 所有数据
            isNone: false, // 
            emptyIco: require('@/assets/teammate_empty.png'),// 为空图片
            ths: 30, // 邀请类型 30直接邀请 40间接邀请
            thss: 1, // 会员类型 1有效 2无效
            list: [], //
            // typenum:41, //类型
            page:1,//多少页
            pagesize:20,
            loading: true,
            finished: false,
            isEmpty: false,//列表是否为空
			myType:1,//会员类型 1 直推 2 间推
			pcount:'',
			spcount:''
        }
    },
    components: {
        pubHead,
        list
    },
    created(){
        this.get()
    },
    filters:{
        time(e){
            var time=new Date(e*1000)
            var year=time.getFullYear()
            var month=time.getMonth() > 10 ? time.getMonth() : '0'+ time.getMonth()
            var day=time.getDay() > 10 ? time.getDay() : '0'+ time.getDay()
            time=year+'-'+month+'-'+day
            return time
        }
    },
    watch: {},
    methods: {
        get(){
            this.$loading()
                myTeam({
                   token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
                    type:this.myType,
                    pagesize:20,
                    page:this.page
                }).then(res=>{
                    this.data = res.data;
                    if (res.data.list.length >0) {
                        this.list = [...this.list, ...res.data.list];
						this.pcount = res.data.pcount
						this.spcount = res.data.spcount
                    }
                    this.loading = false;
                    this.finished = Number(res.data.list.length) < Number(this.pagesize);
                    this.isNone = this.list.length == 0;
                    this.isEmpty = this.list.length == 0
                    this.page++;
					Toast.clear()
                })
        },
        // 返回
        back(){
            this.$router.go(-1)
        },
        // 邀请类型
        type(val){
            if (!this.loading) {
                this.list=[]
                this.myType = val
                this.page = 1
                this.get()
            }else{
                this.$Tip('您点击的太快啦T_T')
            }
        },
        // 会员类型
        thisItem(val){
            if (!this.loading) {
                this.list=[]
                this.page = 1
                this.thss = val
                this.get()
            }else{
                this.$Tip('您点击的太快啦T_T')
            }
        },
        // 时间转换
        timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '年';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '月';
            var D = (date.getDate() < 10 ? '0' +date.getDate() : date.getDate()) + '日';
            return Y+M+D;
        },
    }
}
</script>
<style lang="less" scoped>
.team{
    min-height: 100vh;
    background-color: #f5f5f5;
    .head{
        width: 100%;
        max-width: 750px;
        height: 0.88rem;
        margin: auto 0;
        position: fixed;
        z-index: 100;
        top: 0.88rem;
        background-color: #fff;
        .head-items{
            width: 4.5rem;
            height: 0.68rem;
            margin: auto;
            border-radius: 0.34rem;
            font-size: 0.28rem;
            line-height: 0.66rem;
            color: #53AB2A;
            overflow: hidden;
            .item{
                border: 1px solid #53AB2A;
            }
            .direct{
                border-radius: 0.34rem  0 0 0.34rem;
            }
            .indirect{
                border-radius: 0 0.34rem 0.34rem 0;
            }
            .on{
                color: #fff;
                background-color: #53AB2A;
            }
        }
    }
    .items{
        width: 100%;
        max-width: 750px;
        height: 0.9rem;
        margin: auto 0;
        position: fixed;
        z-index: 100;
        top: 1.76rem;
        font-size: 0.28rem;
        line-height: 0.9rem;
        color: #333;
        border-top: 1px solid #e1e1e1;
        background-color: #fff;
        .item{
            border-bottom: 0.04rem solid transparent;
        }
        .this{
            border-color: #ff2e2e;
            color: #ff2e2e;
        }
    }
    // 占位符
    .fix_space{
        width: 100%;
        height: 0.88rem;
    }
    .lists-head{
        height: 0.8rem;
        padding: 0 0.24rem;
        font-size: 0.3rem;
        line-height: 0.8rem;
        color: #333;
        background-color: #fff;
    }
    .lists{
        padding: 0 0.24rem;
        border-top: 1px solid #dedede;
        background-color: #fff;
        .list{
            height: 1.2rem;
            border-bottom: 1px solid #dedede;
            font-size: 0.26rem;
            line-height: 1.2rem;
            color: #333;
            .list-img-box{
				// padding: .3rem 0;
                .list-img{
                    width: 0.6rem;
                    height: 0.6rem;
                    margin: auto 0;
                    border-radius: 100%;
                    border: 1px solid #dedede;
                    overflow: hidden;
                }
                .name{
                    margin-left: 0.14rem;
                    font-size: 0.32rem;
					width: 4rem;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
                }
            }
            .boss{
                font-size: 0.32rem;
                .boss-level{
                    width: 0.8rem;
                    height: 0.3rem;
                    margin: auto 0 auto 0.06rem;
                    font-size: 0.22rem;
                    line-height: 0.3rem;
                    border-radius: 0.06rem;
                }
                .levela{
                    color: #ff982f;
                    background-color: #ffead5;
                }
                .levelb{
                    color: #589ef7;
                    background-color: #deecfd;
                }
                .levelc{
                    color: #ff2e2e;
                    background-color: #ffdede;
                }
            }
        }
        .list:last-child{
            border: none;
        }
    }
    .empty_box{
        height: calc(100vh - 1.76rem);
        img{
            width: 3.24rem;
            height: 3.06rem;
        }
        p{
            margin-top: 0.3rem;
            font-size: 0.3rem;
            line-height: 120%;
            color: #999;
        }
    }
    
}
</style>

